<template>
    <div class="watchTest">
        <div >监视 ref定义的基本类型的数据</div>
        <span>{{ sum }}</span>
        <button @click="sumAddOne">点我+1 </button>

        <div> 监视 ref定义的对象类型的数据</div>
        <div>姓名：{{person.name }}</div>
        <div>姓名：{{person.age }}</div>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>


        <div>监视 reactive定义的对象类型的数据></div> 
        <div>姓名：{{student.name }}</div>
        <div>姓名：{{student.age }}</div>
        <button @click="changeStudentName">修改名字</button>
        <button @click="changeStudentAge">修改年龄</button>
        <button @click="changeStudent">修改整个人</button>

      <div>监视 reactive定义的对象类型的数据 ,如果向监视某一个属性就要用getter函数></div>
      <div>姓名：{{teacher.name }}</div>
      <div>姓名：{{teacher.age }}</div>
      <button @click="changeTeacherName">修改名字</button>
      <button @click="changeTeacherAge">修改年龄</button>
      <button @click="changeTeacher">修改整个人</button>
    </div>



</template>

<script lang="ts">
import {ref,reactive, watch} from 'vue'
import Person from './Person.vue';
import * as readline from "node:readline";
 export default{
    name:'watchTest',
    setup(){
        let sum = ref(0)
        function sumAddOne(){
            sum.value +=1
        }
        // 监视，一个参数是要监视的值， 第二个参数是一个箭头函数，  watch的返回值是一个函数， 如果调用这个函数就表示结束监视
        // 监视的是 ref reactive  注意不要写value
    const stopwatch = watch(sum,(newValue,oldValue)=>{
            console.log("旧的值是:"+oldValue)
            console.log("新的值是:"+newValue)
            if(newValue>=10){
                stopwatch()
            }
    })


    let person = ref({
        name : '张三',
        age: 18
    })

    function changeName(){
          person.value.name+="~"
    }
    function changeAge(){
        person.value.age+=1
    }
    function changePerson(){
        person.value = {name:'李四',age:20}
    }
    watch(person,(newObjec,oldObject)=>{
        //此时会发现，监视的是对象的地址值，里面的属性name发生变化并不会监视到，但是如果用changePerson整个对象替换(地址发生变化)就会被监视到
        //如果修改的是ref定义的对象的属性，new和old都是新值， 如果修改的是ref定义的对象，那么new是新值，old是旧值
      console.log("数据变化了,new:"+newObjec+",old:"+oldObject)
    })
    watch(person,(newObjec,oldObject)=>{
        //此时会发现，对象所有的变化都会被监视到，watch的第三个参数是 设置deep:true 开启深度监视,, immediate立即监视
      console.log("数据变化了,new:"+newObjec+",old:"+oldObject)
    },{deep:true,immediate:true})


    let student = reactive({
        name: "张同学",
        age:18
    })

    function changeStudentName(){
        student.name+="~"
    }
    function changeStudentAge(){
        student.age+=1
    }
    function changeStudent(){
        // reactive定义的对象 不可以整体修改
        // person.value = {name:'李四',age:20}   //会发现改不了
        Object.assign(student,{name:"李同学",age:22})
    }
    watch(student,(newObject,oldObject)=>{
        //会发现，reactive定义的object会自动打开deep深度监视，而且不可以关闭
        console.log("数据变化了,old=",newObject+"new="+oldObject)
    })

      let teacher = reactive({
        name:'李老师',
        age:49
      })

      function changeTeacherName(){
        teacher.name+="~"
      }
      function changeTeacherAge(){
        teacher.age+=1
      }
      function changeTeacher(){
        teacher = {name:'李四',age:20}
      }
      //监视对象要写成函数式, 然后设置deep:true  这样既能监视到整个对象、又能监视到对象的属性
      watch(()=>teacher.name,(newObjec,oldObject)=>{
        console.log("数据变化了,new:"+newObjec+",old:"+oldObject)
      },{deep:true})

      //情况五  监视多个数据
      watch([()=>teacher.name,student],(newObjec,oldObject)=>{
        console.log("数据变化了,new:"+newObjec+",old:"+oldObject)

      })
        return{sum,person,teacher,sumAddOne,
          student,changeName,changeAge,changePerson,changeStudentName,changeStudentAge,changeStudent,
          changeTeacherName,changeTeacherAge,changeTeacher
        }
    }
}

</script>